<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta charset="UTF-8">
    <title>手机图表</title>
    <link rel="shortcut icon" type="image/ico" href="http://www.eastmoney.com/favicon.ico" />
    <style type="text/css">
    body, form, ul, li, dl, dt, dd, p, table, tr, td, h1, h2, h3, h4, h5, h6, ul, li, form { margin: 0; padding: 0; }

    
    .header .tool-bar {
        background: -webkit-linear-gradient(top, #4d74ae, #2e5186);
        Safari 5.1 - 6.0 background: -o-linear-gradient(bottom, #4d74ae, #2e5186);
        Opera 11.1 - 12.0 background: -moz-linear-gradient(bottom, #4d74ae, #2e5186);
        Firefox 3.6 - 15 background: linear-gradient(to bottom, #4d74ae, #2e5186);
        标准的语法 background: #2e5186;
        height: 70px;
    }
    
    .header .sepe {
        height: 50px;
        background-color: #d1e1f9;
    }
    
    .content {
        background-color: #f2f2f2;
    }
    
    .content .emchart {
        background-color: #fff;
        padding: 0px 10px;
    }
    
    .tabs {
        background-color: #fff;
        height: 50px;
        font-size: 18px;
        color: #000;
        border-bottom: 1px solid #ccc;
        margin-bottom: 15px;
    }
    
    .tabs .tab {
        float: left;
        width: 25%;
        height: 47px;
        line-height: 47px;
        text-align: center;
    }
    
    .tabs .tab.current {
        color: #2f5895;
        border-bottom: 3px solid #2f5895;
    }
    </style>
</head>

<body>
    <div class="main-wrap">
        <div class="main">
            <div class="header">
                <div class="tool-bar">
                </div>
                <div class="sepe">
                    <div class="search" style="height:50px;line-height:50px;">
                        <input type="text" id="stock-code" class="" style="margin-left:30px;padding-left:5px;width:200px;height:20px;" value="请输入股票代码加市场号" onfocus="if(this.value == '请输入股票代码加市场号')  this.value = '';" onblur="if(this.value == '') this.value = '请输入股票代码加市场号';" autocomplete="off">
                        <input type="button" id="search-btn" style="margin-left:10px;width:50px;height:25px;" value="查询">
                    </div>
                </div>
            </div>
            <div class="content">
                <div id="tabs" class="tabs">
                    <div id="tab-0" target="emchart-0" class="tab current">分时</div>
                    <div id="tab-1" target="emchart-1" class="tab">日K</div>
                    <div id="tab-2" target="emchart-2" class="tab">周K</div>
                    <div id="tab-3" target="emchart-3" class="tab">月K</div>
                </div>
                <div class="emchart">
                    <div id="emchart-0" class="em-tab">
                    </div>
                    <div id="emchart-1" class="em-tab">
                    </div>
                    <div id="emchart-2" class="em-tab">
                    </div>
                    <div id="emchart-3" class="em-tab">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../bundle/mobile_emcharts.js"></script>
    <script type="text/javascript">
    var tabs = document.querySelectorAll(".tabs .tab");
    var ems = document.querySelectorAll(".emchart .em-tab");
    var k0, k1, k2, k3, k4, current_tab;
    document.getElementById("tabs").addEventListener("click", function(event) {
        var tab = event.target;
        var code = document.getElementById("stock-code").value;
        if (code == "请输入股票代码加市场号") {
            code = "";
        }
        [].forEach.call(tabs, function(tab) {
            tab.className = tab.className.replace(" current", "");
        });
        [].forEach.call(ems, function(em) {
            em.style.display = "none";
        });
        tab.className = tab.className + " current";
        var target_id = tab.target || tab.getAttribute("target");
        document.getElementById(target_id).style.display = "block";
        var canvas = document.getElementById(target_id).getElementsByTagName("canvas");
        if (canvas.length < 1) {
            if (target_id == "emchart-1") {
                current_tab = k1 = new EmchartsMobileK({
                    dpr: 2,
                    type: "DK",
                    code: code == "" ? "3000592" : code,
                    container: target_id,
                    "width": document.body.offsetWidth - 20,
                    "height": 300,
                    "showV": false,
                    onChartLoaded: function(options) {

                    },
                    markPoint: {
                        show: true,
                        width: 15,
                        height: 15,
                        imgUrl: '',
                        dateList: [
                            '2016-01-02',
                            '2016-04-11',
                            '2016-04-15',
                            '2016-04-21'
                        ]
                    }

                });
                k1.draw();
            }

            if (target_id == "emchart-2") {
                current_tab = k2 = new EmchartsMobileK({
                    dpr: 2,
                    type: "WK",
                    code: code == "" ? "3000592" : code,
                    container: target_id,
                    "width": document.body.offsetWidth - 20,
                    "height": 300,
                    "showV": false,
                    onChartLoaded: function(options) {

                    },
                    markPoint: {
                        show: true,
                        width: 15,
                        height: 15,
                        imgUrl: '',
                        dateList: [
                            '2016-01-02',
                            '2016-04-11',
                            '2016-04-15',
                            '2016-04-21'
                        ]
                    }
                });
                k2.draw();
            }

            if (target_id == "emchart-3") {
                current_tab = k3 = new EmchartsMobileK({
                    dpr: 2,
                    type: "MK",
                    code: code == "" ? "3000592" : code,
                    container: target_id,
                    "width": document.body.offsetWidth - 20,
                    "height": 300,
                    "showV": false,
                    onChartLoaded: function(options) {

                    },
                    markPoint: {
                        show: true,
                        width: 15,
                        height: 15,
                        imgUrl: '',
                        dateList: [
                            '2016-01-02',
                            '2016-04-11',
                            '2016-04-15',
                            '2016-04-21'
                        ]
                    }
                });
                k3.draw();
            }

        } else {

            if (target_id == "emchart-0") {
                current_tab = k0;
            }

            if (target_id == "emchart-1") {
                current_tab = k1;
            }

            if (target_id == "emchart-2") {
                current_tab = k2;
            }

            if (target_id == "emchart-3") {
                current_tab = k3;
            }
        }

    })

    window.onload = function() {
        current_tab = k0 = new EmchartsMobileTime({
            dpr: 2,
            code: "3000592",
            container: "emchart-0",

            "width": document.body.offsetWidth - 20,
            "height": 300,
            "showV": false
        });
        k0.draw();

    }

    /*触摸事件*/
    var search_btn = document.getElementById("search-btn");
    search_btn.addEventListener("click", function(event) {
        var code = document.getElementById("stock-code").value;
        if (code == "" || code == "请输入股票代码加市场号") {
            alert("请输入股票代码加市场号");
            return;
        }
        // document.getElementById(current_tab.options.container).innerHTML = "";
        if (current_tab.options.type == "T1") {
            current_tab = new EmchartsMobileTime({
                dpr: 2,
                code: code == "" ? "3000592" : code,
                container: current_tab.options.container,
                "width": document.body.offsetWidth - 20,
                "height": 300
            });
            current_tab.draw();
        } else {
            current_tab = new EmchartsMobileK({
                dpr: 2,
                type: current_tab.options.type,
                code: code == "" ? "3000592" : code,
                container: current_tab.options.container,
                "width": document.body.offsetWidth - 20,
                "height": 300,
                onChartLoaded: function(options) {

                },
                markPoint: {
                    show: true,
                    width: 15,
                    height: 15,
                    imgUrl: '',
                    dateList: [
                        '2016-01-02',
                        '2016-04-11',
                        '2016-04-15',
                        '2016-04-21'
                    ]
                }

            });
            current_tab.draw();
        }

    });
    </script>
</body>

</html>
